<template>
  <div class="filter-form">
    <el-form
      size="small"
      style="height: 100%;display: inline-block;"
    >
      <el-col
        v-for="(item,index) in filterList"
        :key="index"
        :span="7"
        style="padding:5px;margin-left: 10px;"
      >
        <template v-if="item.formType==='0'">
          <selectTree :common-index="index" :show-label="item.showLabel" :choose-year="year" :item-url="item.url" :placeholder="item.placeholder" :common-values="item.value" @changeData="changeData" />
        </template>
        <template v-if="item.formType==='1'">
          <el-input v-model="item.value" :placeholder="item.placeholder" />
        </template>
        <template v-if="item.formType==='2'">
          <el-select v-model="item.value" filterable clearable :placeholder="item.placeholder" @focus="getSelectFouce(item.url)">
            <el-option
              v-for="(item1,index1) in selectOption"
              :key="index1"
              :label="item1[item.showLabel]"
              :value="item1[item.showLabel]"
            />
          </el-select>
        </template>

      </el-col>
    </el-form>
    <div style="text-align:right">
      <el-button size="small" @click="filterTable">筛选</el-button>
      <el-button size="small" @click="resetTable()">重置</el-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { getFilter } from '@/api/reportCenter';
import selectTree from '@/components/SelectTree/index.vue';
import { getCommonDataSource } from '@/api/reportCenter';
import { filterData } from '@/views/reportCenter/stateData';

export default {
  components: {
    selectTree
  },
  props: {
    year: {
      type: String,
      default: ''
    },
    tableTitle: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      selectOption: [],
      // 存放选择的条件
      filterList: []
    };
  },

  computed: {
    getYear() {
      return new Date(this.year).getFullYear();
    }
  },

  created() {
    const roleName = localStorage.getItem('xcRoleName');
    this.getFilterData();
    if (this.tableTitle === '按指标类型查询表') {
      this.filterList.forEach(item => {
        if (roleName.indexOf('乡镇') !== -1) {
          item.url = item.url + 'Xz';
        }
      });
    }
  },

  methods: {

    // 获取对应存放选择的条件
    getFilterData() {
      const filterListKeys = Object.keys(filterData);
      const filterListKey = filterListKeys.find(key => key === this.tableTitle);
      if (filterListKey) {
        this.filterList = filterData[filterListKey];
      }
    },

    resetTable(type) {
      this.filterList.map(o => {
        o.value = '';
      });
      this.$parent.$parent.filterList = [];
      this.$message({
        message: '重置成功',
        type: 'success'
      });
    },
    changeData(row) {
      this.filterList[row.commonIndex].value = row.data[row.showLabel];
    },
    filterTable() {
      const filterArray = [];
      let col = '';
      this.filterList.map(o => {
        if (o.formType === '0' || o.formType === '2') {
          col = o.value.split(' ')[0];
        } else if (o.formType === '1') {
          col = o.value;
        }
        if (o.value !== '') {
          this.$parent.$parent.searchContent += o.placeholder + ':' + o.value + ',';
          filterArray.push({
            value: col,
            col: o.col = o.col.toUpperCase(),
            symbol: o.symbol
          });
        }
      });
      document.body.click();
      if (filterArray.length !== 0) {
        this.$parent.$parent.isShowCondition = true;
      }
      this.$parent.$parent.filterList = filterArray;
      this.$parent.$parent.initPage(this.year);
    },

    getSelectFouce(url) {
      getCommonDataSource({
        year: this.year.split('-')[0]
      }, url).then(res => {
        if (res.success) {
          this.selectOption = res.data;
        } else {
          this.selectOption = [];
        }
      });
    },

    getFilters(item, key) {
      const commonRequestData = {
        year: this.getYear,
        resultAsTree: item.isTree
      };
      if (!this.filterCondition[key].length) {
        getFilter(commonRequestData, item.url).then(res => {
          if (res.success) {
            this.filterCondition[key] = res.data;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-form{
  display: inline-block;
}
.filter-form /deep/.el-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 35px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
}
</style>
